@import 'mixins';
@import 'variables';

@include keyframes(spin) {
  100% {
    @include rotate(360);
  }
}
@include keyframes(slidein) {
  0% {
    transform: translateX(100%);
  }

  100% {
    transform: translateX(0%);
  }
}

body,
head,
html {
  height: 100%;
  width: 100%;
}

body {
  color: $colour-text1;
  display: flex;
  flex-direction: column;
  font-family: $font-stack-regular;
  overflow-x: hidden;

  &.noscroll {
    @media (max-width: $width-medium) {
      overflow: hidden;
    }
  }
}

h1 {
  @include hide-text;

  background: url('./images/logo.svg') no-repeat;
  height: 13rem;
  margin: auto;
  width: 10rem;
}

h2 {
  font-size: 2.5rem;
  font-weight: 700;
  margin: 0;
}

h3 {
  font-size: 2rem;
  font-weight: 700;
  margin: 0 0 2rem;
  text-align: center;
}

h4 {
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0;
}

p {
  margin: 0 0 1rem;

  &:last-child {
    margin-bottom: 0;
  }
}

a {
  border-bottom: 1px dotted $colour-text1;
  color: $colour-text1;
  cursor: pointer;
  transition: color, ease-in, 0.2s;

  &:active,
  &:focus,
  &:hover,
  .active {
    border-bottom-color: $colour-link-highlight;
    color: $colour-link-highlight;
    outline: 0;
    text-decoration: none;
  }
}

nav,
header,
section {
  z-index: 1;
}

nav {
  &.navbar-custom {
    background: rgba($colour-text2, 0.9);

    &.open {
      @media (max-width: $width-medium) {
        @include animation(slidein 0.3s forwards);

        font-size: 1.5rem;
        height: 100vh;
        left: 0;
        padding: 8% 0 0 10%;
        position: fixed;
        top: 0;
        width: 100vw;
        z-index: 100;

        .nav,
        .navbar-collapse {
          display: block;

          &::before {
            content: ' ' !important;
            display: table !important;
          }
        }

        .navbar-nav > li > a {
          display: inline-block;
          line-height: 2rem;
        }
      }
    }

    #navbar {
      .navbar-nav {
        letter-spacing: 1px;

        li {
          a {
            border-bottom: 0 !important;
            color: $colour-text1;

            &:active,
            &:hover {
              color: $colour-link-highlight;
              outline: 0;
            }

            &:focus {
              @extend a;
            }

            &.active {
              background: transparent;
              color: $colour-link-highlight;

              &:active,
              &:focus,
              &:hover {
                @extend a;
              }
            }
          }
        }
      }

      @media (min-width: $width-medium) {
        justify-content: center;
      }
    }

    .navbar-collapse {
      border: 0;
      box-shadow: none;
    }

    @media (max-width: $width-medium) {
      margin-bottom: 0;
      min-height: auto;
      padding: 0;
    }
  }
}

pre {
  background: transparent;
  border: 0;
  padding: 0;
}

code {
  color: $colour-link-highlight !important;
  font-family: $font-stack-code;
}

header {
  padding: 5rem 0;

  & > .container > .row {
    @media (min-width: $width-large) {
      display: flex;

      .col-lg-7 {
        display: flex;
        flex-direction: column;
        justify-content: center;
      }
    }
  }

  h2 {
    @media (max-width: $width-large) {
      text-align: center;
    }
  }

  .title {
    margin-top: 2.5rem;

    @media (min-width: $width-medium) {
      align-items: center;
      display: flex;
      margin-top: 0;
    }
  }
}

section {
  padding: 5rem 0;

  & > .container > .panel {
    a {
      border-bottom-color: $colour-text2;
      color: $colour-text2;

      &:active,
      &:focus,
      &:hover,
      .active {
        border-bottom-color: $colour-link-highlight;
        color: $colour-link-highlight;
      }
    }
  }

  &.dark {
    background-color: $colour-section1-bg;
    color: $colour-section1-text;

    a {
      border-bottom-color: $colour-section1-text;
      color: $colour-section1-text;

      &:active,
      &:focus,
      &:hover,
      .active {
        border-bottom-color: $colour-link-highlight;
        color: $colour-link-highlight;
      }
    }
  }

  .example {
    font-size: 0.9rem;
    margin-bottom: 3rem;

    p {
      font-style: italic;
      margin-bottom: 0.5rem;
    }

    pre {
      @media (min-width: $width-medium) {
        margin-left: 2rem;
      }
    }

    ul {
      list-style: none;
      padding: 0;

      @media (min-width: $width-medium) {
        margin-left: 2rem;
      }
    }
  }

  .header {
    display: flex;
    justify-content: space-between;

    .label {
      border-radius: 0.4rem;
      color: $colour-text1;
      font-size: 0.75rem;
      font-weight: bold;
      padding: 0.1rem 0.3rem;
      vertical-align: middle;

      &.label-info {
        background-color: $colour-bg2;
      }

      &.label-success {
        background-color: $colour-success;
      }

      &.label-warning {
        background-color: $colour-warning;
      }
    }

    @media (max-width: $width-small) {
      flex-direction: column;
    }
  }

  .panel {
    background-color: $colour-section2-bg;
    border-radius: 2rem;
    box-shadow: 0.6875rem 1.3125rem 4.125rem rgba(0, 0, 0, 0.25);
    color: $colour-section2-text;
    padding: 2rem;

    a {
      border-bottom-color: $colour-section2-text;
      color: $colour-section2-text;

      &:active,
      &:focus,
      &:hover,
      .active {
        border-bottom-color: $colour-link-highlight;
        color: $colour-link-highlight;
      }
    }
  }

  &#serviceinfo {
    margin-top: -5rem;
    padding-bottom: 2.5rem;
  }

  &#status {
    .serviceinfo {
      font-size: 1.2rem;
      margin-bottom: 1.5rem;
      width: 100%;

      &.offline {
        #servermessage,
        .version {
          display: none;
        }
      }

      #servermessage {
        font-style: italic;
        margin-top: 0.25rem;
        quotes: '\201c''\201d';
        text-align: center;

        & > p {
          display: inline-block;
        }
      }

      .status {
        display: flex;
        justify-content: space-evenly;

        & > span {
          display: block;
          line-height: 1.4rem;
          min-width: 8rem;
          text-align: center;
        }

        #location {
          display: none;
        }

        @media (max-width: 768px) {
          display: block;
          margin-bottom: 1rem;
        }
      }
    }
  }

  @media (max-width: $width-medium) {
    padding: 5rem 0;
  }
}

span {
  &.text-danger {
    color: $colour-danger !important;
  }

  &.text-success {
    color: $colour-success !important;
  }

  &.text-warning {
    color: $colour-warning !important;
  }
}

.background {
  @include background-gradient(20deg, $colour-bg1, 0, $colour-bg2, 100%);

  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;

  .background-img {
    background: url('./images/clouds.svg');
    background-repeat: repeat;
    background-size: $bg-width;
    display: block;
    height: $bg-height * 10;
    opacity: 0.2;
    position: absolute;
    top: -$bg-height;
    width: $bg-width * 10;
    z-index: 0;

    @media (max-width: $width-medium) {
      background-size: 40rem;
    }
  }
}

.container {
  @media (min-width: $width-xlarge) {
    max-width: 960px;
  }
}

.hamburger {
  border-bottom: 0.27rem solid $colour-text1;
  border-top: 0.27rem solid $colour-text1;
  display: inline-block;
  height: 1.34rem;
  opacity: 0.9;
  position: relative;
  top: -0.3rem;
  width: 1.75rem;

  &::before {
    border-top: 0.27rem solid $colour-text1;
    content: '';
    left: 0;
    position: absolute;
    top: 0.27rem;
    width: 100%;
  }
}

.nav-menu-button {
  background: rgba($colour-text2, 0.9);
  border: 0;
  border-radius: 5rem;
  color: $colour-text1;
  display: none;
  font-size: 1.75rem;
  height: 3rem;
  line-height: 3.7rem;
  outline: none;
  padding: 0;
  position: fixed;
  right: 6%;
  top: 4%;
  width: 3rem;
  z-index: 20;

  @media (max-width: $width-medium) {
    display: block;
  }
}
